<template>
  <div style="padding:20px;">
    <el-row>
      <p>基础信息</p>
      <el-form id="consult-form" label-width="40%" class="require-form">
        <el-form-item label="企业名称：">
          {{ detail.companyName }}
        </el-form-item>
        <el-form-item label="开始合作时间：">
          {{ detail.companyDate }}
        </el-form-item>
        <el-form-item label="合作方联系人：">
          {{ detail.companyLinkman }}
        </el-form-item>
        <el-form-item label="联系电话：">
          {{ detail.companyLinkPhone }}
        </el-form-item>
        <el-form-item label="目前在职人数：">
          {{ detail.companyScale }}
        </el-form-item>
        <el-form-item label="备注：">
          {{ detail.companyDesc }}
        </el-form-item>
        <el-form-item label="是否回款：">
          {{ detail.companyMoneyBack?'是':'否' }}
        </el-form-item>
        <!-- <el-form-item label="备注：">
          {{ detail.origin }}
        </el-form-item> -->
      </el-form>
    </el-row>
    <el-row>
      <p>合作政策</p>
      <div>
        <el-button class="filter-item" style="float:right;margin-bottom:10px;" type="primary" icon="el-icon-edit" @click="handleCreate" v-show='$store.state.user.roles[0]!="直营店" && $store.state.user.roles[0]!="加盟店"'>新增</el-button>
      </div>
      <el-table v-loading="listLoading" :data="list" border fit highlight-current-row style="width: 100%;">
        <el-table-column label="日期" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.policyDate | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="到手价" prop="policuAvalPrice" align="center" />
        <el-table-column label="支出价" prop="policuExpPrice" align="center" />
        <!-- <el-table-column label="操作" align="center" width="230" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button size="mini" type="success" @click="handleDetail(scope.row)">查看</el-button>
            <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column> -->
      </el-table>
    </el-row>
    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
      <el-form ref="dataForm" :rules="rules" :model="temp" label-position="right" label-width="100px" style="width: 400px; margin-left:50px;">
        <!-- <el-form-item :label-width="formLabelWidth" label="所属公司">
          <el-select v-model="temp.company_id" placeholder="请选择">
            <el-option v-for="item in enterpriseOptions" :key="item.key" :label="item.value" :value="item.key" />
          </el-select>
        </el-form-item> -->
        <el-form-item :label-width="formLabelWidth" label="有效时间">
          <el-date-picker v-model="temp.policyDate" type="date" placeholder="选择日期" value-format="yyyy-MM-dd" />
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="到手价">
          <el-input v-model="temp.policuAvalPrice" placeholder="请输入到手价" />
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="支出价">
          <el-input v-model="temp.policuExpPrice" placeholder="请输入支出价" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogStatus==='create'?createData():updateData()">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
	// fetchPolicyAjax,
	// addPolicyAjax,
	// updatePolicyAjax,
	addPolicyInfoAjax,
	getPolicyDetailAjax
} from "@/api/finance";
import { fetchEnterPriseListAjax } from "@/api/enterprise";
// import { fetchEnterPriseListAjax } from "@/api/enterprise";
// import waves from "@/directive/waves"; // Waves directive
// import { parseTime } from "@/utils";
// import Pagination from "@/components/Pagination"; // Secondary package based on el-pagination

export default {
	name: "Collect",
	data() {
		return {
			detail: {},
			list: [],
			listLoading: false,
			dialogFormVisible: false,
			enterpriseOptions: [],
			temp: {},
			textMap: {
				create: "新增政策",
				update: "更新政策"
			},
			dialogStatus: "",
			formLabelWidth: "150px",
			rules: {}
		};
	},
	created: function() {
		if (this.$route.params.id > 0) {
			this.getPolicyDetailAjax(this.$route.params.id);
			this.tempRoute = Object.assign({}, this.$route);
		}
		this.getEnterPriseOptions();
	},
	methods: {
		getEnterPriseOptions() {
			try {
				fetchEnterPriseListAjax().then(result => {
					console.log(result)
					result.data.data.forEach(item => {
						this.enterpriseOptions.push({
							key: item.id,
							value: item.companyName
						});
					});
				});
			} catch (err) {
				console.log(err);
			}
		},
		getPolicyDetailAjax(id) {
			getPolicyDetailAjax(id)
				.then(response => {
					const data = response.data.data;
					if (data) {
						this.detail = data.rddPolicy;
						this.list = data.rddPolicyInfoList;
					}
				})
				.catch(err => {
					console.log(err);
				});
		},
		handleCreate() {
			this.temp = {};
			this.dialogStatus = "create";
			this.dialogFormVisible = true;
			this.$nextTick(() => {
				this.$refs["dataForm"].resetFields();
			});
		},
		createData() {
			this.temp.policy_id = this.$route.params.id;
			this.temp.company_id = this.detail.company_id;
			addPolicyInfoAjax(this.temp)
				.then(response => {
						this.dialogFormVisible = false;
						this.$notify({
							title: "成功",
							message: "创建成功",
							type: "success",
							duration: 2000
						});
						if (this.$route.params.id > 0) {
							this.getPolicyDetailAjax(this.$route.params.id);
							this.tempRoute = Object.assign({}, this.$route);
						}
				})
				.catch(err => {
					console.log(err);
				});
		}
	}
};
</script>
<style lang="scss">
fieldset {
	margin-bottom: 15px;
	border: 1px solid #e5e5e5;
	padding-left: 15px;
	legend {
		width: auto;
		margin: 0 0 0 -5px;
		font-size: 13px;
		font-weight: bold;
		border-bottom: 0;
		padding: 0 5px;
	}
	ol {
		padding-left: 25px;
	}
	li {
		font-size: 13px;
		color: #141414;
		line-height: 20px;
		margin-top: 3px;
	}
}
</style>
